<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="信息分类">
				<el-select v-model='form.categoryId'>
					<el-option v-for="item in category" :key="item.id" :value="item.id" :label="item.category_name">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="新闻标题">
				<el-input v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="缩位图">
               <Uploading :imageUrl.sync='imageUrl'/>
			</el-form-item>
			<el-form-item label="发布日期">
				<el-date-picker v-model="form.createDate" type='date' placeholder='选择日期' disabled></el-date-picker>
			</el-form-item>

			<el-form-item label="详细内容">
				<!--  @blur="onEditorBlur($event)"
				 @focus="onEditorFocus($event)" @change="onEditorChange($event) -->
				<quill-editor v-model="form.content" ref="myQuillEditor" :options="form.editorOption">
				</quill-editor>

			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="onSubmit" :loading='isloading'>立即创建</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	import {
		reactive,
		ref,
		watch,
		onMounted,
		toRefs,
		computed,
		watchEffect
	} from '@vue/composition-api';
	import {
		getCategory,
		newsGetList
	} from '@/api/news.js'
	import {
		common
	} from '@/api/common.js'
	// 富文本 
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';

	import {
		quillEditor
	} from "vue-quill-editor";
	import {
		editInfo
	} from '@/api/news.js'
	import Uploading from '@/components/Uploading/index.vue'
	export default {
		name: 'InfoDetailed',
		components: {
			quillEditor,
			Uploading
		},
		setup(props, {
			root,
			refs
		}) {
			const {
				formatDate
			} = common()
			// data 
			let data = reactive({
				id: root.$route.params.id || root.$store.getters['info/infoId'],
				title: root.$route.params.title || root.$store.getters['info/infoTitle'],
				category: [],
				editorOption: {},
				isloading: false,
				imageUrl: ''
			})
			const form = reactive({
				categoryId: '',
				title: '',
				createDate: '',
				content: ''
			})
			const {
				id
			} = data
			// methods
			const getToken = async () => {
				const res = await uploadImgToken(uploadImgConfig)
			}
			const getList = async () => { //获取信息分类 
				const res = await getCategory()
				data.category = res.data.data
			}
			const escapeStringHTML = (str) => {
				str = str.replace(/<[^bai>]+>/g, "");
				return str;
			}
			const getInfo = async () => { //根据id获取信息
				let requestData = {
					pageNumber: 1,
					pageSize: 1,
					id: id
				}
				const res = await newsGetList(requestData)
				const {
					categoryId,
					categoryName,
					content,
					createDate,
					title
				} = res.data.data[0]
				form.categoryId = categoryId
				form.title = title
				form.createDate = formatDate(createDate * 1000, 'yyyy-MM-dd')
				form.content = content
			}

			const onSubmit = () => {
				const requestData = {
					categoryId: form.categoryId,
					id: id,
					title: form.title,
					content: escapeStringHTML(form.content)
					// imageUrl:data.imageUrl
				}
				data.isloading = true
				editInfo(requestData).then(res => {
					if (res.resCode === 0) {
						data.isloading = false
						root.$message.success('修改成功')
						return
					}
				}).catch(err => {
					data.isloading = false
				})
			}
			// watch 
			watchEffect(() => {
				data = data
			})
			// mounted
			onMounted(() => {
				getList(),
				getInfo()

			})
			// computed 
			const editor = computed(() => refs.myQuillEditor.quill)

			return {
				...toRefs(data),
				form,
				onSubmit,
			}
		}
	}
</script>

<style lang='scss' scoped>
	
</style>
